import React, { useEffect, useState } from "react";

const getData = () => {
  return fetch("http://www.pudge.wang:3080/api/rated/list")
    .then((response) => response.json())
    .then((res) => {
      return res;
    });
};

// useEffect调用的时候没有返回值的
// 里面需要传入参数
// 第一个参数是回调函数
// 第二个参数是一个数组, 数组里面写的是依赖

// 如果只有一个参数，那么就相当于componentDidMount以及componentDidUpdate
// 如果有第二个参数，并且是一个空数组，那么相当于componentDidMount
// 如果第二个参数有依赖，那么相当于watch
// constructor的内容是可以放在函数组件里面直接写的
// 如果回调函数里面返回一个函数，那么返回的函数里面相当于componentWillUnmount

// useEffect可以多次执行
// 如果在useEffect里面去调用封装好的请求，那么我们要使用自执行函数

const App = () => {
  const [count, setCount] = useState(5);
  const [num, setNum] = useState(10);
  // useEffect(() => {
  //   console.log(count);
  // }, [count]);

  // useEffect(() => {
  //   return () => {
  //     console.log("组件被卸载了");
  //   };
  // }, []);

  // useEffect(() => {
  //   const timer = setInterval(() => {
  //     console.log(12333);
  //   }, 1000);
  //   return () => {
  //     clearInterval(timer);
  //   };
  // }, []);

  useEffect(() => {
    (async () => {
      const res = await getData();
      console.log(res);
    })();
  }, []);

  return (
    <>
      <h2>useEffect</h2>
      <p>{count}</p>
      <button onClick={() => setCount((v) => v + 1)}>btn</button>
      <p>{num}</p>
      <button onClick={() => setNum((v) => v + 1)}>btn</button>
    </>
  );
};

export default App;
